We want you to be completely satisfied with this theme. If you have any questions that go beyond the scope of this documentation, please refer to our support portal for the most up-to-date resources.
We've taken careful measures and a lot of time to document this theme fully. Please refer to the support portal above for very helpful resources that expand upon the helpful information in this documentation, including:
The following sections explain everything there is to know about this theme, from installing it, to importing demo content, to modifying theme files, to setting up content carousels, to troubleshooting, to helpful tips and beyond! Please let us know if we missed anything or anything is inaccurate in this documentation - we would greatly appreciate it.
ThemeForest provides two different theme files to download. You need only download the installable theme file unless you want additional reference material such as layered PSD designs or PNG components. Once you've downloaded the installable theme zip file, there are two ways to install it in your WordPress install:
We usually recommend the FTP method since it cuts out the middleman (WordPress uploader code) and is the most straightforward way to do it. However some prefer directly installing in WordPress for convenience. To use the WordPress installer:
If you run into any issues it is possible that a plugin or internal component is causing issues, and sometimes max upload filesize limits imposed by web hosts can also wreak havoc on larger themes. Whatever the cause, if you want to manually upload the theme via FTP:
Important The folder you install/upload should be called "explicit" and contain the style.css file directly inside of it (this is the file that tells WordPress the name of the theme). Do not install/upload any other folder, such as "Explicit-Theme" for instance. This could potentially cause problems or at the very least confusion later on.
We have made recreating the demo site easy with a 3-step process. This process assumes you have a blank WordPress install with no content.
If you are installing this theme on a brand new blank WordPress installation, you can skip this section. If you already have articles with featured images in your WordPress site before you install the theme, you will need to resize your featured images to fit the dimensions of all the thumbnail areas. To easily and quickly do this, install the AJAX Thumbnail Rebuild plugin, and then go to Tools >> Rebuild Thumbnails and run it once. After the first time you run it, you will not have to run it again since any images uploaded after you have installed the theme will automatically be sized correctly. It only applies to images uploaded to your media library before you install the theme.
Tip If you have a lot of images it might take a while to complete - just let it work its magic and if for some reason it doesn't finish the first time feel free to run it again as many times as you want - it won't hurt anything or create any duplicate images.
This theme is built using Bootstrap and is an 1140px-wide responsive layout. All of the code is spaced, indented, commented in-line, and semantically written to make it as easy as possible to edit and customize to your particular needs. The theme is built with valid HTML5 code and has been tested to be compatible with Chrome, Firefox, Opera, Safari, IE9+, and was also tested on an iPad using Chrome and Safari as well as an iPhone. The theme is HiDPI/retina compatible. It was built and tested with WordPress version 3.8. The general layout of the HTML code is as follows:
<div id="section-menu-mobile">
...jquery-generated section slide out mobile menu...
</div>
<nav id="sticky-menu">
...jquery-generated sticky slide out mobile menu...
</div>
<div class="mmpage">
<div class="container">
<div id="header">
<div class="row">
...theme header with logo, ad, and social badges...
</div>
</div>
</div>
<div class="container">
<div id="sticky-bar">
<div class="row">
...fixed sticky bar containing menus and search...
</div>
</div>
</div>
<div class="after-header">
<div class="container">
<div class="row" id="[page-builder-specific-id]">
...page builder specific code...
</div>
</div>
<div class="container">
<div class="row" id="[page-builder-specific-id]">
...page builder specific code...
</div>
</div>
[...user-specified page builder panels...]
</div>
<div id="footer-wrapper">
<div class="container">
<div id="footer">
<div class="row">
...footer widgets...
</div>
</div>
</div>
</div>
<div id="subfooter-wrapper">
<div class="container">
<div id="subfooter">
<div class="row">
...subfooter content...
</div>
</div>
</div>
</div>
</div>
The style scaffolding for this theme is provided by Bootstrap which enables all the responsive layouts and basic styling of most elements. The code for the bootstrap begins at the top of the style.css file, followed by the rest of the theme code. The responsive styles are split out into the css/responsive.css file because responsiveness is able to be disabled via the theme options which requires the declarations to be in a separate file (which is selectively included based on the theme options. The css/bootstrap.css file contains the unminified version of the Bootstrap code if you need it. You'll notice another file called css/editor-style.css which is only loaded in the admin panel and is used to style the content editor box.
Since this theme is both responsive and HiDPI/retina ready, it has a fairly complex stylesheet and makes use of media queries to serve specific styles for specific displays. Also, any Bootstrap style overrides that are necessary for the theme are also within the style.css file. We have provided a blueprint of the stylesheet so that you can more easily find what you're looking for:
/*************************************************
begin bootstrap framework
*************************************************/
Bootstrap framework (minified)
/*************************************************
general fonts
*************************************************/
font declarations
/*************************************************
general utilities
*************************************************/
some css resets and utility classes
/*************************************************
logo bar
*************************************************/
the logo area including header ad
/*************************************************
ads
*************************************************/
general ad styles
/*************************************************
sticky bar
*************************************************/
the fixed style bar containing menus and search
/*************************************************
bar headers
*************************************************/
common styles for all bar and widget headers
/*************************************************
sortbars
*************************************************/
styles for the various sort button control bars
/*************************************************
pagination
*************************************************/
the styles for the pagination
/*************************************************
icons and buttons
*************************************************/
common styles for all icons and buttons
/*************************************************
utility menu bar
*************************************************/
the utility menu page builder
/*************************************************
rating meters
*************************************************/
the circular rating meters used throughout the theme
/*************************************************
portholes
*************************************************/
the box overlay posts area
/*************************************************
general article listings
*************************************************/
common styles for all article loops
/*************************************************
headliner
*************************************************/
the headliner page builder panel
/*************************************************
connect bar
*************************************************/
the connect page builder panel
/*************************************************
explicit
*************************************************/
the explicit page builder panel
/*************************************************
trending
*************************************************/
the trending page builder panel
/*************************************************
top ten
*************************************************/
the top ten page builder panel
/*************************************************
widgets
*************************************************/
all sidebar widget panels
/*************************************************
single page content
*************************************************/
styles for any time a single page is being viewed
/*************************************************
author listing
*************************************************/
the author listing loop template page
/*************************************************
directory
*************************************************/
the directory template pages
/*************************************************
footer
*************************************************/
all styles relating to both footer and subfooter
/*************************************************
shortcodes and bootstrap overrides
*************************************************/
since this file is loaded after bootstrap, any specific overrides to the default bootstrap style is done here
/*************************************************
plugin compatibility
*************************************************/
some style tweaks are necessary to make BuddyPress and WooCommerce look good
/*************************************************
ratings
*************************************************/
general styles for whenever ratings appear anywhere in the theme
/*************************************************
jQuery rateit (stars)
*************************************************/
/*************************************************
jQuery slider (form toggle slider)
*************************************************/
/*************************************************
jQuery colorbox
*************************************************/
/*************************************************
jQuery smooth div scroll
*************************************************/
this is used by the top ten and explicit scrollers
/*************************************************
jQuery master slider
*************************************************/
this is used by the hero slider
/*************************************************
jQuery mmenu
*************************************************/
the mobile slide-out menu style
/*************************************************
font icons
*************************************************/
the icon font set declarations
/*************************************************
print style
*************************************************/
/*************************************************
browser specific compatibility
*************************************************/
/*************************************************
retina
*************************************************/
swaps out template images with 2x size for HiDPI displays
Tip Whenever you want to change the style of any part of the theme, use Chrome or Firefox+Firebug and right click on the area you want to change and choose Inspect Element. That will bring up a console that shows exactly which lines of CSS in exactly which files affect that element so that you can go in and change the style how you see fit.
This theme enqueues WordPress's built-in javascript libraries correctly using the wp_enqueue_script function and does not make any manual calls to jQuery or jQuery UI libraries. Here are the scripts that are enqueued:
wp_register_script('it-plugins', THEME_JS_URI . '/plugins.min.js', false, false, true);
#jquery
wp_enqueue_script("jquery");
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-tabs');
wp_enqueue_script('jquery-ui-widget');
wp_enqueue_script('jquery-ui-slider');
wp_enqueue_script('jquery-effects-core');
wp_enqueue_script('jquery-effects-slide');
wp_enqueue_script('it-plugins');
#wp ajax library
wp_enqueue_script('itajax-request', THEME_URI . '/js/ajax.min.js', array( 'jquery' ));
wp_localize_script('itajax-request', 'itAjax', array('ajaxurl' => admin_url( 'admin-ajax.php' )));
After jQuery and jQuery UI are loaded, the theme then loads the theme's plugin-specific javascript libraries (including Bootstrap) contained in the js/plugins.min.js file. There is an unminified human-readable version in the same folder called plugins.js. Lastly the theme's AJAX javascript is loaded which is contained in the js/ajax.min.js file. There is an unminified human-readable version in the same folder called ajax.js. Here's a list of all of the javascript plugins contained in the plugins file:
You'll notice there is no custom.js file or or any other javascript file that has all the theme-specific javascript code, and that's because all of this is contained within the inc/scripts.php file. The reason for this is because within a lot of the javascript functions it is necessary to access a theme setting or other PHP variable, so the page is actually a PHP file that outputs javascript. This file is loaded in the footer so it does not have any negative performance impact. When you open the file to edit it you'll see normal javascript code with a few PHP variables dispersed throughout.
The framework.php file, which is called by the standard functions.php file, sets up all the theme functions and classes. Within this file is the main IndustrialThemes class that builds out theme constant variables, functions files (found inside the functions/ folder), theme actions/filters/supports methods, and localization.
There are two main folders containing all of the PHP files used by the theme, the inc/ folder and the functions/ folder. The inc/ folder contains all of the files that are called by the theme files using the it_get_template_part() function. The argument within the function matches the filename of the file to load within the inc/ folder. For instance, this it_get_template_part('trending') will load the trending.php file within the inc/ folder. A good example of this is the theme's various page builder templates where the code loops through the theme options and then loads the respective file. An example is in the index.php file:
<?php get_header(); // show header ?>
<?php
#loop through content panels
$builder = it_get_setting('builder');
if(!empty($builder)) {
foreach($builder as $component) {
it_get_template_part($component);
}
} else {
it_get_template_part('portholes');
}
?>
<?php get_footer(); // show footer ?>
As you can see this allows a very clean set of standard WordPress theme framework files and keeps all the code organized into the various components. In fact, almost every PHP file you open follows suit and does not contain very much code but instead calls a file within the inc/ folder. This is done for the purposes of easily reusing large blocks of code, such as the grid style loop code found in the grid-paged.php file within the inc/ folder which is used in various places within the theme. Here is a list of all page builder-enabled template files:
The heart of the theme is within the functions/ folder and these files are called directly within the IndustrialThemes class from the framework.php file. This includes files that create the core functionality, review functionality, widgets and shortcodes, and admin functionality for the theme options page, page and post meta boxes, and general administrative and troubleshooting utilities. There are numerous files that make up the framework of the theme, so we have listed them all out below along with a brief description of what each one does:
This theme contains both a compressed, non-layered version and a layered PNG version of every template image. If you want to edit one of the images within the theme's images/ folder you will notice that if you open it in a graphics editor it is just a flattened bitmap. Instead, look inside the PNG folder which comes inside of your main theme download folder from ThemeForest and find the corresponding image. You can open it in a graphics editor and make custom changes since it is a fully layered PNG version of the image. If you cannot find a corresponding version of the image you're trying to edit please contact support and let us know so we can provide you with the image.
Addionally we have made available the layered design PNGs and PSDs for your convenience. These files are contained within either the PNG or the PSD folder (which is in the same location as the PNG folder mentioned above). You can open any of the PSDs in a capable graphics editor (such as Photoshop) and quickly find any part of the theme you're looking for. Alternatively you can open the corresponding PNG file in a capable graphics editor (such as Fireworks) and get the same access as the PSD version. This theme was designed using Fireworks and PNGs as opposed to Photoshop and PSDs, so the best option would be to edit the PNGs since they were converted retroactively into PSDs and not the other way around.
These are the design files provided (they are named the same in both the PNG and PSD folders):
Tip If you cannot find a corresponding image in the PNG folder it likely means there is no layered version available, such as for category icons or very simple one-color graphical elements. However just to be sure we haven't missed it, feel free to contact us and ask about it.
Using the theme is actually pretty self-evident, and whenever there is any information that needs to be conveyed you can find it by hovering over the help icon to the right of each setting in the theme options and also in the post and page meta box options. We have also created screecasts that detail step by step how to accomplish common theme tasks, such as setting up category colors/icons or using the shortcode generator. There are several additional helpful pieces of information that you may come across which are detailed below. Further questions that come up after the theme has been published will be added to the FAQs.
Console error msg: "body.scrollTop is deprecated in strict mode. Please use 'documentElement.scrollTop' if in strict mode..."If you run the Theme Check plugin, which is a requirement for submitting themes to ThemeForest and the WordPress plugin directory, you'll notice some warnings/errors that warrant explanation. Here is a list of the warning messages that occur and the explanation as to why each of them exists:
Explanation: The theme does not support using a custom image for the header. You can use a custom logo and a custom background, but due to the nature of the theme layout there really isn't a container for a header-specific image.
Explanation: This is needed for serializing the theme options in order for users to be able to export and import their theme options. There is no malicious code or file operations and it is purely for theme settings importing/exporting purposes and only available to the site admin.
Explanation: Required by the functions in the widget that displays Twitter, Facebook, and Google+ social counts. This is the standard way of obtaining this information and interacting with the social media vendor APIs and there is no malicious code or file operations happening.
Explanation: Yes, there are a few places where hard-coded links are purposefully present, including the credits link in the footer to Google Fonts and the demo panel link to the theme features.
We have optimized all of the images used in our live preview using the WP Smush.it plugin which greatly reduces filesizes of images without sacrificing quality. Other than that, we are running the stock theme without any other modifications, because the theme was built with speed in mind. For instance, icon fonts are used instead of icon images which provides two benefits: performance and HiDPI/retina capability.
We know it's important that your site is as fast as possible, which is why we've designed the theme to be as fast as possible. However if you test the theme using page speed metric sites like Pingdom and GTMetrix you'll always see room for improvement. It's important to note that not all site performance measures can be accomplished purely in the code - a lot of it has to do with web server settings, external assets like images, and third-party code. To further fine-tune the speed of your site we recommend following the techniques described in the page speed testers, and if you need professional expertise we recommend Microlancer.com for great developers.
Our live demo, which is completely loaded with just about as much content and images as you can have on a page, gets an 86/100 performance grade, and that's without any caching plugins active. The load time is ~4 seconds and the page size is ~2.7 MB. These can be even further reduced by displaying less content on the page - it just depends on your individual needs.
We have extensively tested the theme using various page speed metric sites and fine-tuned it as much as we possibly could before we released it. Here is an itemized list of common recommendations we came across during our testing, along with our explanation of precisely why the issue is either irrelevant to the actual theme code or why we chose not to implement it:
Explanation: The theme only uses 3 javascript files, one for Bootstrap, one for the theme's jQuery plugins, and one for the theme's AJAX requests. The rest of the files are enqueued correctly and via best practices from WordPress's internal js library and thus cannot be combined. The reason the Bootstrap, plugins, and AJAX javascript files are not combined is to make it easier to update Bootstrap in the future, and serving three js files instead of one has such a negligible impact that we are not worried about it. Besides, they are all compressed and minified.
Explanation: The reason the CSS is split into 2 files is because the theme gives the ability to disable responsiveness, in which cases the responsive CSS declarations are omitted (which couldn't be done if all the CSS was in one file). This has negligible impact on site performance. If you wanted to use just one stylesheet then you could copy the code from the css/responsive.css file directly into the style.css (paste it at the very bottom of the file) and then remove all instances of "../" since you are technically moving the file one level higher in the directory structure.
Explanation: This is again referring to the javascript imported directly from within WordPress's internal libraries, and WordPress requires that querystrings be used in the enqueueing functions (in other words, this is not a theme issue but rather an inherent WordPress nuance).
Explanation: This depends on which testing tool you're using. For instance, GTMetrix will say there are some scaled images, but that's only because it's testing with the medium responsive layout instead of the full desktop layout view, which causes some of the image thumbnails to get slightly scaled down for responsive reasons. You should disregard this notices as it is irrelevant to the theme.
Explanation: Just add less page builder panels to the page to get less DOM elements. You have complete control over how simple or complex your site is because of how easy it is to use the theme's page builders.
Explanation: This only applies to images that are available for users to upload one by one in the theme options, such as awards, badges, and minisite icons. We use them as background images for performance reasons, and that in turn trips the flags in some of the performance testing tools even though it's irrelevant.
Explanation: This is caused by Facebook integration within the social widgets and there is nothing to be done on the theme's end (in other words, this is not a theme issue but rather an inherent third-party vendor-specific nuance).
Explanation: The Pinterest widget displays images without image dimensions. Just don't use it and you won't have this issue. There's nothing that can be done on the theme's end (in other words, this is not a theme issue but rather an inherent third-party vendor-specific nuance). All image dimensions are specified correctly within the theme code.
Explanation: This is not theme-related in any way. It is completed up to you whether or not you choose to use a CDN, and doing so requires you to set it up on your web server, not within the theme files.
Explanation: This is not theme-related in any way. It is completely up to you whether or not you choose to use compression for your site, and doing so requires you to set it up on your web server, not within the theme files.
If you are running a previous IndustrialThemes theme that allows minisite creation and want to upgrade to this theme, the biggest thing you need to take into account is that you will need to convert your existing minisite articles back into standard WordPress posts. You will not lose your articles, but you will need to open each article and re-apply your editor ratings, and you will also lose your existing user ratings, so be very cautious before migrating themes. Details will be retained from the previous theme, as well as likes, views, and comments. If you were not using minisites you can disregard this.
/%category%/%postname%/All external assets used by the theme have been bought and paid for or are free for commercial use. We have taken careful strides to make sure we attribute every asset to its creator and owner even if attribution is not required. In order to keep this list updated easily and contained in just one place, we have created a section of the support center purely for housing credit/copyright/licensing information. Please refer to that page for credits: